<template>
  <el-form 
    ref="formRef" 
    :model="form" 
    :rules="rules" 
    label-width="80px" 
    class="demo-ruleForm"
  >
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input 
        type="password" 
        v-model="form.password" 
        autocomplete="off"
      ></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="confirmPassword">
      <el-input 
        type="password" 
        v-model="form.confirmPassword" 
        autocomplete="off"
      ></el-input>
    </el-form-item>
    <el-form-item label="电子邮箱" prop="email">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary"
      :loading="loading"
      @click="handleSubmit">注册</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
    <el-form-item>
      <el-link type="primary" @click="toggleMode('login')">已有账号？去登录</el-link>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { ElMessage,ElNotification } from 'element-plus';
import { defineEmits } from 'vue';

import { registerApi } from '@/api/sys/user';

const emit = defineEmits(['toggle-mode']);

const formRef = ref(null);

const loading = ref(false); // 添加加载状态

const form = reactive({
  username: '',
  password: '',
  confirmPassword: '',
  email: ''
});

const validateConfirmPassword = (rule, value, callback) => {
  if (value !== form.password) {
    callback(new Error('两次输入的密码不一致'));
  } else {
    callback();
  }
};

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: validateConfirmPassword, trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入电子邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
  ]
};

const handleSubmit = () => {
  if (!formRef.value) return;
  formRef.value.validate(async(valid) => {
    if (valid) {
      try {
        loading.value = true; // 开始加载
        const res = await registerApi(form);
        // 注册成功后，可以重定向到登录页面或其他页面
        ElNotification({
          title: '成功',
          message: '注册成功，请登录。',
          type: 'success'
        });
        emit('toggle-mode', 'login'); // 切换到登录模式
      } catch (error) {
        // 处理注册失败的情况
        ElNotification({
          title: '失败',
          message:  error,
          type: 'error'
        });
      } finally {
        loading.value = false; // 结束加载
      }
      // // 模拟注册逻辑
      // ElMessage({
      //   message: '注册成功',
      //   type: 'success'
      // });
      // resetForm();
    } else {
      console.log('error submit!');
      return false;
    }
  });
};

const resetForm = () => {
  if (!formRef.value) return;
  formRef.value.resetFields();
};

const toggleMode = (mode) => {
  emit('toggle-mode', mode);
};
</script>